<template>
  <div class="order-show-price">
    <h1>
      订单金额
      <small>注：订单金额 = 测量费 + 运输费 + 安装费 + 服务费</small>
    </h1>

    <el-table class="price-table" :data="[order]" style="width: 100%">
      <el-table-column label="测量费用">
        <template scope="scope">
          {{scope.row.measure_amount | conver_money}}
          <el-button class="pull-right" type="text" @click="openDialog('measure_amount', order.measure_amount)">修改</el-button>
        </template>
      </el-table-column>
      <el-table-column label="运输费用">
        <template scope="scope">
          {{scope.row.ship_price | conver_money}}
          <el-button class="pull-right" type="text" @click="openDialog('ship_price', order.ship_price)">修改</el-button>
        </template>
      </el-table-column>
      <el-table-column label="安装费用">
        <template scope="scope">
          {{scope.row.install_amount | conver_money}}
          <el-button class="pull-right" type="text" @click="openDialog('install_amount', order.install_amount)">修改</el-button>
        </template>
      </el-table-column>
      <el-table-column label="平台服务费用">
        <template scope="scope">
          {{scope.row.basic_order_tax | conver_money}}
        </template>
      </el-table-column>
      <el-table-column class-name="all-amount" label="总金额">
        <template scope="scope">
          {{scope.row.basic_order_tax | conver_money}}
        </template>
      </el-table-column>
    </el-table>

    <el-row class="upload-price-imgs">
      <span class="price-detail-tip">价格明细：{{ order.price_pictures ? '已上传' : '未上传' }}</span>
      <el-button class="display-btn" type="text" v-if="order.price_pictures" @click="priceImgVisible = !priceImgVisible">查看</el-button>
      <upload-img :img-type="'price'"></upload-img>
      <el-dialog :visible.sync="priceImgVisible" size="large">
        <img width="100%" v-if="order.price_pictures" :src="order.price_pictures.image.url" alt="">
      </el-dialog>
    </el-row>
    <edit-dialog ref="dialog"></edit-dialog>
  </div>
</template>

<script>
import EditDialog from './editDialog'
import UploadImg from './uploadImg'
import { mapGetters } from 'vuex'

export default {
  components: {
    EditDialog,
    UploadImg
  },
  data: () => ({
    priceImgVisible: false
  }),
  computed: {
    ...mapGetters('orders', [
      'order',
      // 'priceImgUrl'
    ])
  }, methods: {
    openDialog(key, value) {
      this.$refs.dialog.openDialog(key, value)
    }
  }
}
</script>
